$(function () {
    // 头部动画 照片动画
    var image = document.getElementById("animatedImage");
    var image2 = document.getElementById("img_22");
    image.classList.remove('hidden');
    image.classList.add('animate-fadeIn');

    image2.classList.remove('hidden');
    image2.classList.add('animate-fadeIn');

    image.addEventListener('animationend', function () {
        this.classList.add('animate-bounceAfter');
    });
    image2.addEventListener('animationend', function () {
        this.classList.add('animate-bounceAfter');
    });

    //头部动画 中间
    $("#neirong2").hide();
    $(function () {
        $("#neirong2").fadeIn(3000);
    })


    // 第一个
    $(".div_yuan_5").mouseover(function () {
        $(".inp1").css("color", "white").css("background-color", "black");
        $(".sp_1").css("color", "black");
    })

    $(".div_yuan_5").mouseout(function () {
        $(".inp1").css("color", "white").css("background-color", "white")
        $(".sp_1").css("color", "white");
    })


    // 第二个
    $(".div_yuan_6").mouseover(function () {
        $(".inp2").css("color", "white").css("background-color", "black");
        $(".sp_2").css("color", "black");
    })

    $(".div_yuan_6").mouseout(function () {
        $(".inp2").css("color", "white").css("background-color", "white")
        $(".sp_2").css("color", "white");
    })


    // 第三个

    $(".div_yuan_7").mouseover(function () {
        $(".inp3").css("color", "white").css("background-color", "black");
        $(".sp_3").css("color", "black");
    })

    $(".div_yuan_7").mouseout(function () {
        $(".inp3").css("color", "white").css("background-color", "white")
        $(".sp_3").css("color", "white");
    })


    // 第四个
    $(".div_yuan_8").mouseover(function () {
        $(".inp4").css("color", "white").css("background-color", "black");
        $(".sp_4").css("color", "black");
    })

    $(".div_yuan_8").mouseout(function () {
        $(".inp4").css("color", "white").css("background-color", "white")
        $(".sp_4").css("color", "white");
    })

    // 第五个
    $(".div_yuan_9").mouseover(function () {
        $(".inp5").css("color", "white").css("background-color", "black");
        $(".sp_5").css("color", "black");
    })

    $(".div_yuan_9").mouseout(function () {
        $(".inp5").css("color", "white").css("background-color", "white")
        $(".sp_5").css("color", "white");
    })


    //定义圆形精度条1
    function jindu() {
        var canvas = document.getElementsByClassName('progressCanvas')[0];
        var ctx = canvas.getContext('2d');

        canvas.width = 200;
        canvas.height = 200;

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 80;

        var progress = 0;
        var targetProgress = 75;
        var animationDuration = 500;
        var frameRate = 16;
        var increment = (targetProgress / (animationDuration / frameRate));

        function drawProgress(progress) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
            ctx.strokeStyle = '#ccc';
            ctx.lineWidth = 10;
            ctx.stroke();

            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, -Math.PI / 2, (-Math.PI / 2) + (progress / 100) * 2 * Math.PI);
            ctx.strokeStyle = '#04ffa0';
            ctx.lineWidth = 10;
            ctx.lineCap = 'round';
            ctx.stroke();

            ctx.font = 'bold 30px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillStyle = 'white';
            ctx.fillText(Math.round(progress) + '%', centerX, centerY);
        }

        function animateProgress() {
            if (progress < targetProgress) {
                progress += increment;
                drawProgress(progress);
                requestAnimationFrame(animateProgress);
            } else {
                drawProgress(targetProgress);
            }
        }

        animateProgress();
    }

    jindu();

    //定义圆形精度条2
    function jindu_2() {
        var canvas = document.getElementsByClassName('progressCanvas')[1];
        var ctx = canvas.getContext('2d');

        canvas.width = 200;
        canvas.height = 200;

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 80;

        var progress = 0;
        var targetProgress = 80;
        var animationDuration = 500;
        var frameRate = 16;
        var increment = (targetProgress / (animationDuration / frameRate));

        function drawProgress(progress) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
            ctx.strokeStyle = '#ccc';
            ctx.lineWidth = 10;
            ctx.stroke();

            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, -Math.PI / 2, (-Math.PI / 2) + (progress / 100) * 2 * Math.PI);
            ctx.strokeStyle = '#04ffa0';
            ctx.lineWidth = 10;
            ctx.lineCap = 'round';
            ctx.stroke();

            ctx.font = 'bold 30px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillStyle = 'white';
            ctx.fillText(Math.round(progress) + '%', centerX, centerY);
        }

        function animateProgress() {
            if (progress < targetProgress) {
                progress += increment;
                drawProgress(progress);
                requestAnimationFrame(animateProgress);
            } else {
                drawProgress(targetProgress);
            }
        }

        animateProgress();
    }

    jindu_2();

    //定义圆形精度条3
    function jindu_3() {
        var canvas = document.getElementsByClassName('progressCanvas')[2];
        var ctx = canvas.getContext('2d');

        canvas.width = 200;
        canvas.height = 200;

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 80;

        var progress = 0;
        var targetProgress = 95;
        var animationDuration = 500;
        var frameRate = 16;
        var increment = (targetProgress / (animationDuration / frameRate));

        function drawProgress(progress) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
            ctx.strokeStyle = '#ccc';
            ctx.lineWidth = 10;
            ctx.stroke();

            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, -Math.PI / 2, (-Math.PI / 2) + (progress / 100) * 2 * Math.PI);
            ctx.strokeStyle = '#04ffa0';
            ctx.lineWidth = 10;
            ctx.lineCap = 'round';
            ctx.stroke();

            ctx.font = 'bold 30px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillStyle = 'white';
            ctx.fillText(Math.round(progress) + '%', centerX, centerY);
        }

        function animateProgress() {
            if (progress < targetProgress) {
                progress += increment;
                drawProgress(progress);
                requestAnimationFrame(animateProgress);
            } else {
                drawProgress(targetProgress);
            }
        }

        animateProgress();
    }

    jindu_3();

    //定义圆形精度条4
    function jindu_4() {
        var canvas = document.getElementsByClassName('progressCanvas')[3];
        var ctx = canvas.getContext('2d');

        canvas.width = 200;
        canvas.height = 200;

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 80;

        var progress = 0;
        var targetProgress = 65;
        var animationDuration = 500;
        var frameRate = 16;
        var increment = (targetProgress / (animationDuration / frameRate));

        function drawProgress(progress) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
            ctx.strokeStyle = '#ccc';
            ctx.lineWidth = 10;
            ctx.stroke();

            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, -Math.PI / 2, (-Math.PI / 2) + (progress / 100) * 2 * Math.PI);
            ctx.strokeStyle = '#04ffa0';
            ctx.lineWidth = 10;
            ctx.lineCap = 'round';
            ctx.stroke();

            ctx.font = 'bold 30px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillStyle = 'white';
            ctx.fillText(Math.round(progress) + '%', centerX, centerY);
        }

        function animateProgress() {
            if (progress < targetProgress) {
                progress += increment;
                drawProgress(progress);
                requestAnimationFrame(animateProgress);
            } else {
                drawProgress(targetProgress);
            }
        }

        animateProgress();
    }

    jindu_4();


    //定义鼠标移入移出

    //图片1
    $(".img_1").hover(myImg, myImg2);

    //移入
    function myImg() {
        $(this).attr("src", "img/smile.jpg");
    }

    //移出
    function myImg2() {
        $(this).attr("src", "img/sad.jpg");
    }

    //图片2
    $(".img_2").hover(myImg_1, myImg_2);

    //移入
    function myImg_1() {
        $(this).attr("src", "img/sad.jpg");
    }

    //移出
    function myImg_2() {
        $(this).attr("src", "img/smile.jpg");
    }


    // 鼠标经过改颜色
    //图片1
    $(".san1").hover(myImg_3, myImg_4);

    //移入
    function myImg_3() {
        $(".div_yuan_wu").css("background-color", "deeppink");
    }

    //移出
    function myImg_4() {
        $(".div_yuan_wu").css("background-color", "black");
    }

    // 鼠标经过改颜色
    //图片1
    $(".san2").hover(myImg_5, myImg_6);

    //移入
    function myImg_5() {
        $(".div_yuan_wu2").css("background-color", "deeppink");
    }

    //移出
    function myImg_6() {
        $(".div_yuan_wu2").css("background-color", "black");
    }
})

// 胡日璇
$(function () {
    // 获取移入图片
    var picture = $('.picture');
    // 建立一个新的img中的内容
    var h1 = $('<h1></h1>');
    var p1 = $('<p></p>');
    var p2 = $('<p></p>');
    var a1 = $('<a></a>');
    var div1 = $('<div></div>');
    var span1 = $('<span></span>');
    h1.text("Consecte Adipis");
    p1.text("Lorme ipsum dolor sit amet,");
    p2.text("consectetur");
    a1.text("SEE PROJECT").css("");
    span1.attr("class","glyphicon glyphicon-search");
    div1.append(h1).append(p1).append(p2).append(span1).append(a1);
    div1.css("height","220px").css("width","290px");
    // 鼠标移入图片事件
    picture.on("mouseover", function () {
        $(this).find('img').hide();
        $(this).append(div1).css("background","pink");
    })
    // 鼠标移出
    picture.on("mouseout", function () {
        $(this).find('img').show();
    })

})
